<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      title="添加作业"
      width="500"
      center
      @close="closeHandler"
      @open="openHandler"
    >
      <el-form
        label-width="100px"
        v-loading="loading"
        :model="workParams"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="作业名称:" prop="name">
          <el-input
            placeholder="请输入作业名称"
            v-model="workParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="父文件夹:" prop="parentId">
          <el-tree-select
            placeholder="请选择文件夹"
            :data="fileList"
            v-model="workParams.parentId"
            :render-after-expand="false"
            :props="treeProps"
            style="width: 240px"
            :check-strictly="true"
          ></el-tree-select>
        </el-form-item>
        <el-form-item label="所属班级:" prop="classId">
          <el-select placeholder="请选择班级" v-model="workParams.classId">
            <el-option
              v-for="item in classList"
              :key="item._id"
              :label="item.className"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandler"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getClassListAPI } from "@/api/class";
import { getFileListAPI } from "@/api/file";
import { createWorkAPI } from "@/api/work";
import { buildTree } from "@/utiles/tree";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
const emits = defineEmits(["getWorkList"]);
let centerDialogVisible = defineModel();
let loading = ref(false);
let classList = ref([]);
let fileList = ref([]);
let formRef = ref();
let workParams = reactive({
  name: "",
  parentId: "",
  classId: "",
});
const treeProps = {
  label: "name",
  children: "children",
  value: "_id",
};
const validataName = (rule, value, callback) => {
  const regex = /^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5_. ]*$/;
  console.log(regex.test(value));
  if (regex.test(value)) {
    callback();
  } else {
    callback(new Error("文件夹名称格式错误"));
  }
};
let rules = reactive({
  name: [
    { required: true, message: "请输入作业名称", trigger: "blur" },
    {
      validator: validataName,
      message: "作业名称格式错误",
      trigger: "blur",
    },
  ],
  parentId: [{ required: true, message: "请选择父文件夹", trigger: "blur" }],
  classId: [{ required: true, message: "请选择所属班级", trigger: "blur" }],
});
const closeHandler = () => {
  centerDialogVisible.value = false;
  formRef.value.resetFields();
  loading.value = false;
};
const openHandler = async () => {
  loading.value = true;
  let classResult = await getClassListAPI(1, 99);
  let fileResult = await getFileListAPI();
  if (classResult.code == 200 && fileResult.code == 200) {
    classList.value = classResult.data.list;
    fileList.value = buildTree(fileResult.data);
  }
  loading.value = false;
};
const submitHandler = async () => {
  await formRef.value.validate();
  loading.value = true;
  let result = await createWorkAPI(workParams);
  if (result?.code == 200) {
    ElMessage.success("作业创建成功");
    emits("getWorkList");
    closeHandler();
  }

  loading.value = false;
  console.log(loading.value);
};
</script>

<style lang="scss" scoped></style>
